<template>
    <div class="content">
        <div class="left">
            <p class="title">公告中心</p>
            <div class="more">
                <span class="much">更多</span>
                <van-icon name="arrow" class="icon" />
            </div>
        </div>
        <div class="right">
            <div class="top">
                <van-row >
                        <van-col class="headlines" span="4" >
                            <p class="headlines_title">
                                头条
                            </p>
                        </van-col>
                        <van-col span="18" class="headlines_news">{{message}}</van-col>
                        <van-col span="2" >
                            <van-icon name="arrow" class="icon_left" />
                        </van-col>
                    </van-row>
            </div>
            <div class="bottom">
                <vue-seamless-scroll :data="data" class="seamless-warp" :class-option="classOption">
                    <ul >
                        <li class="listdata" v-for="(el,value) in data" :key="value">
                            <van-row >
                                <van-col span="3" class="status">
                                    <p class="style" :style="classObj(el.status)">{{el.status===0?'未读':'已读'}}
                                </p>
                                </van-col>
                                <van-col span="21" class="info">
                                    {{el.data}}
                                </van-col>
                            </van-row >
                        </li>
                    </ul>
                </vue-seamless-scroll>
            </div>
        </div>
    </div>
</template>

<script>
import {
  Row, Col, Icon, Swipe, SwipeItem,
} from 'vant';
import vueSeamlessScroll from 'vue-seamless-scroll';

export default {
  components: {
    [Col.name]: Col,
    [Row.name]: Row,
    [Icon.name]: Icon,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    vueSeamlessScroll,
  },
  data() {
    return {
      message: '关于做好五一劳动节假期期间直营厅店销售及服务保障的通知：做好五一劳动节期间货源保障和新品销售工作',
      data: [{
        data: '关于开展vivo S15e、Y33s产品销售工作的通知：vivo S15e、Y33s将于2021年4月上市，为确保销售工作的顺利推进，现将产品相关销售信息通知如下，请各地市遵照执行。', status: 0,
      }, {
        data: '关于开展realme V23销售工作的通知：realme V23产品将于2022年4月上市，为确保销售工作的顺利推进，现将产品相关销售信息通知如下，请各地市遵照执行。', status: 1,
      }, {
        data: '关于开展vivo X80系列产品销售工作的通知：vivo X80、X80Pro将于2021年4月上市，为确保销售工作的顺利推进，现将产品相关销售信息通知如下，请各地市遵照执行。', status: 0,
      }],
    };
  },
  computed: {
    classObj() {
      return (value) => {
        if (value === 0) {
          return { color: 'orange', background: 'rgb(245, 236, 194)', fontSize: '12px' };
        } if (value === 1) {
          return { color: 'rgb(185, 185, 183)', background: 'rgba(236, 234, 234, 0.863)', fontSize: '12px' };
        }
        return '';
      };
    },
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
};
</script>

<style lang="less" scoped>
.content{
    width: 375px;
    height: 180px;
    background-color: #fff;
    padding: 15px 10px;
    box-sizing: border-box;
    display: flex;
}
.left{
    width: 75px;
    height: 100%;
    background: rgba(236, 234, 234, 0.863);
    margin-right: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title{
        display: inline-block;
        font-size: 16px;
        font-weight: 500;
        width: 50%;
    }
    .much{
        display: inline-block;
        height: 16px;
        font-size: 12px;
        color: rgb(185, 185, 183);
    }
    .icon{
        display: inline-block;
        font-size: 12px;
        line-height: 16px;
        height: 16px;
        color: rgb(185, 185, 183);
    }
    .more{
        margin-top: 8px;
        display: flex;
        align-items: baseline;
    }
}
.right{
    width: 300px;
    height: 100%;
    ::-webkit-scrollbar {
        width: 0px;
        height: 0px;
    }
    .top{
        height: 35px;
        border-bottom: 1px solid rgba(235, 228, 228, 0.863);
        .headlines{
            height: 35px;
            font-size: 10px;
            color: #fff;
            position: relative;
            .headlines_title{
                width: 40px;
                height: 25px;
                line-height:25px ;
                text-align: center;
                font-size: 14px;
                border-radius: 5px;
                background-color: orange;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin:auto;
            }

        }
        .headlines_news{
            height: 35px;
            line-height: 35px;
            padding-left: 5px;
            box-sizing: border-box;
            font-size: 15px;
            color: rgb(139, 139, 138);
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .bottom{
        height: 113px;
        overflow: auto;
        .listdata {
            height: 33px;
            padding-top: 11px;
            box-sizing: border-box;
            color: rgb(185, 185, 183);
                .style{
                width:35px ;
                height:21px ;
                border-radius: 5px;
                font-size: 14px;
                text-align: center;
                line-height: 21px;
                background: #fff;
                }

        }
    }
    .info{
        height:21px ;
        line-height: 21px;
        padding-left: 10px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .icon_left{
        font-size: 15px;
        color: rgb(139, 139, 138);
        margin-top: 9px;
    }
}

</style>
